<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue'
import { Search } from '@element-plus/icons-vue'

import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const choseDate = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const value = ref('');
const initChart = () => {
    const chartDom1 = document.getElementById('chartDom1');
    const chartDom2 = document.getElementById('chartDom2');
    const chartDom3 = document.getElementById('chartDom3');
    const chartDom4 = document.getElementById('chartDom4');
    var myChart1 = echarts.init(chartDom1);
    var myChart2 = echarts.init(chartDom2);
    var myChart3 = echarts.init(chartDom3);
    var myChart4 = echarts.init(chartDom4);
    var option;
    option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        bottom: '0%',
        right: '70%',
        z: 2,
        itemWidth: 20,
        itemHeight: 10
    },
    series: [
        {
        name: '数据',
        type: 'pie',
        radius: ['50%', '60%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
            borderRadius: 10
        },
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
            }
        },
        labelLine: {
            show: false
        },
        data: [
            { value: 1048, name: '未完成' },
            { value: 735, name: '已完成' },
            { value: 580, name: '无业务' }
        ]
        }
    ]
    };

    option && myChart1.setOption(option);
    option && myChart2.setOption(option);
    option && myChart3.setOption(option);
    option && myChart4.setOption(option);
}
onMounted(() => {
    setTimeout(() => {
        initChart()
    }, 200);
})


const serviceSet = ref(false)
const img = 'https://tse1-mm.cn.bing.net/th/id/OIP-C.ulmT87MhK62ybOmamJoRhQHaHa?w=176&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3'
const handleClick = () => {
  console.log('click')
}

// 表格相关
const columns = [
    {
        title: '客户名称',
        key: 'customerName',
        sortable: true,
    },
    {
        title: '客户编号',
        key: 'customerId',
        sortable: true
    },
    {
        title: '票里',
        key: 'pl',
        filterable: true,
        customer: true
    },
    {
        title: '记账',
        key: 'jz',
        filterable: true,
        customer: true
    },
    {
        title: '申报',
        key: 'sb',
        filterable: true,
        customer: true
    },
    {
        title: '缴款',
        key: 'jk',
        filterable: true,
        customer: true
    },
    {
        title: '记事本',
        key: 'jsb',
        filterable: true,
        customer: true
    }
];
const mockData = ref([]);
const loading = ref(true)
onMounted(() => {
    setTimeout(() => {
        loading.value = false
    }, 1000)
    mockData.value = [
        {
            customerName: "张三",
            customerId: "C001",
            pl: "1000",
            jz: "500",
            sb: "200",
            jk: "300",
            jsb: "备注1"
        },
        {
            customerName: "李四",
            customerId: "C002",
            pl: "1500",
            jz: "600",
            sb: "250",
            jk: "350",
            jsb: "备注2"
        },
        {
            customerName: "王五",
            customerId: "C003",
            pl: "2000",
            jz: "700",
            sb: "300",
            jk: "400",
            jsb: "备注3"
        },
        {
            customerName: "赵六",
            customerId: "C004",
            pl: "2500",
            jz: "800",
            sb: "350",
            jk: "450",
            jsb: "备注4"
        },
        {
            customerName: "钱七",
            customerId: "C005",
            pl: "3000",
            jz: "900",
            sb: "400",
            jk: "500",
            jsb: "备注5"
        }
    ]
})


// 分页相关
const currentPage4 = ref(4)
const pageSize4 = ref(100)

// 轮播图
const imgs = [
    'https://ts1.tc.mm.bing.net/th/id/OIP-C.IYiponv9D0RaQtyvb9WLnQHaFn?w=287&h=217&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    'https://ts3.tc.mm.bing.net/th/id/OIP-C.1mbxvHjFXm7SAN5WhkJ98gHaFj?w=288&h=216&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
    '',
    'https://tse1-mm.cn.bing.net/th/id/OIP-C.cvcKKo5QnDuOgPC2_XzNBAHaFl?w=243&h=185&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
    'https://tse2-mm.cn.bing.net/th/id/OIP-C.bTgf32fmRGfk6nnzo908IwHaHa?w=180&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3'
]

const value1 = ref(null)

// 筛选表单相关
const filterData = ref({
    position: '财务会计',
    positionPeople: '',
    dept: '',
    deptInclude: false,
    customerSign: '',
    customerLevel: ''
})
// 职务列表
const positionList = ref([
    {
        label: '财务会计',
        value: '财务会计'
    },
    {
        label: '税务会计',
        value: '税务会计'
    },
    {
        label: '开票员',
        value: '开票员'
    }
])
// 职务对应的人员
const positionPeopleList = ref([
    {
        label: '张三',
        value: '张三'
    },
    {
        label: '李四',
        value: '李四'
    },
    {
        label: '王五',
        value: '王五'
    },
    {
        label: '赵六', 
        value: '赵六'     
    }
])
// 部门数据
const deptList = ref([
    {
        label: '财务部',
        value: '财务部'
    },
    {
        label: '税务部',
        value: '税务部'
    },
    {
        label: '开票部',
        value: '开票部'
    }
])
// 客户标签列表
const customerSignList = ref([
    {
        label: '零申报、无社保',
        value: '零申报、无社保'
    },
    {
        label: '零申报、有社保',
        value: '零申报、有社保'
    },
    {
        label: '无收入、有费用',
        value: '无收入、有费用'
    },
    {
        label: '多家公司一起对接',
        value: '多家公司一起对接'
    }
])
const customerLevelList = ref([
    {
        label: '一般客户',
        value: '一般客户'
    },
    {
        label: '重要客户',
        value: '重要客户'
    },
    {
        label: 'VIP客户',
        value: 'VIP客户'
    },
    {
        label: '特殊客户',
        value: '特殊客户'
    }
])


const submit = (scope) => {
    scope.close()
}
</script>

<template>
    <div class="home">
        <div class="home-top">
            <div class="home-top-left">
                <div class="home-top-left-title">
                    <div class="home-top-left-title-label">
                        进度统计(账套: 0)
                    </div>
                    <div class="home-top-left-title-filter">
                        <div class="left-title-filter-date">
                            <div class="left-title-filter-date-label">
                                税款所属期
                            </div>
                            <div class="left-title-filter-date-select">
                                <el-date-picker
                                    v-model="choseDate"
                                    type="date"
                                    placeholder="选择日期"
                                    :default-value="new Date()"
                                />
                            </div>
                        </div>
                        <div class="left-title-filter-taxpayer">
                            <el-select v-model="value" placeholder="Select" style="width: 150px">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                        </div>
                        <div class="left-title-filter-user">
                            <el-select v-model="value" placeholder="Select" style="width: 120px">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                        </div>
                    </div>
                </div>
                <div class="home-top-left-chars">
                    <div class="home-top-left-chars-item" v-for="item in [1,2,3,4]" :key="item">
                        <div class="chars-item-label">
                            理票进度(0%)
                        </div>
                        <div class="chars-content" :id="'chartDom'+item" ref="chartDom">

                        </div>
                    </div>
                </div>
            </div>
            <div class="home-top-right">
                <div class="home-top-right-label">
                    <div class="top-right-label-wait">
                        <div class="wait-icon label-icon">

                        </div>
                        <div class="wait-text label-text">
                            代办事项
                        </div>
                        <div class="wait-num label-num">
                            0
                        </div>
                    </div>
                    <div class="top-right-label-wait">
                        <div class="wait-icon label-icon">

                        </div>
                        <div class="wait-text label-text">
                            代审事项
                        </div>
                        <div class="wait-num label-num">
                            0
                        </div>
                    </div>
                </div>
                <div class="home-top-right-wapper">
                    <el-carousel class="home-top-right-wapper-carousel">
                        <el-carousel-item v-for="item in imgs" :key="item">
                            <img :src="item" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
        <div class="home-table-body">
            <div class="home-table-operate">
                <div class="home-table-operate-left">
                    <div class="label">工作进度</div>
                    <stick-popup>
                        <template #show>
                            <div class="top-filter-btn">
                                <div class="top-filter-btn-label">
                                    筛选
                                </div>
                                <div class="top-filter-btn-icon">
                                    <Operation />
                                </div>
                            </div>
                        </template>
                        <template #content>
                            <!-- 筛选表单 -->
                            <div class="top-filter-form">
                                <el-form :model="form" label-width="80px">
                                    <el-form-item label="职务">
                                        <el-select v-model="filterData.position">
                                            <el-option 
                                                v-for="item in positionList" 
                                                :key="item.value" 
                                                :label="item.label" 
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="员工">
                                        <el-select v-model="filterData.positionPeople" multiple >
                                            <el-option 
                                                v-for="item in positionPeopleList" 
                                                :key="item.value" 
                                                :label="item.label" 
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="所属部门">
                                        <el-select v-model="filterData.dept" multiple >
                                            <el-option 
                                                v-for="item in deptList" 
                                                :key="item.value" 
                                                :label="item.label" 
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="">
                                        <el-checkbox v-model="filterData.deptInclude" label="部门包含下级" size="default" border />
                                    </el-form-item>
                                    <el-form-item label="客户标签">
                                        <el-select v-model="filterData.customerSign" multiple >
                                            <el-option 
                                                v-for="item in customerSignList" 
                                                :key="item.value" 
                                                :label="item.label" 
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="所属部门">
                                        <el-select v-model="filterData.customerLevel" multiple >
                                            <el-option 
                                                v-for="item in customerLevelList" 
                                                :key="item.value" 
                                                :label="item.label" 
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </template>
                        <template #footer="scope">
                            <div class="top-filter-operate">
                                <el-button type="text">取消</el-button>
                                <el-button type="primary" @click="submit(scope)">确定</el-button>
                            </div>
                        </template>
                    </stick-popup>
                    <div class="top-filter-search">
                        <el-input
                            v-model="input1"
                            placeholder="请输入客户名称或编号或税号"
                            >
                            <template #append>
                                <el-button :icon="Search" />
                            </template>
                        </el-input>
                    </div>
                    <el-button type="primary">导出</el-button>
                    <div class="service-set">
                        业务设定
                        <el-switch v-model="value" active-text="开" inactive-text="关" />
                    </div>
                </div>
                <div class="home-table-operate-right">
                    <div class="home-table-operate-right-item">
                        <div class="operate-right-item-icon">
                            <el-icon :size="20" color="lightgreen"><CircleCheckFilled /></el-icon>
                        </div>
                        <div class="operate-right-item-text">
                            已完成
                        </div>
                    </div>
                    <div class="home-table-operate-right-item">
                        <div class="operate-right-item-icon">
                            <el-icon :size="20" color="#989"><CircleCheckFilled /></el-icon>
                        </div>
                        <div class="operate-right-item-text">
                            未完成
                        </div>
                    </div>
                    <div class="home-table-operate-right-item">
                        <div class="operate-right-item-icon">
                            <el-icon :size="20" color="#ccc"><CircleCheckFilled /></el-icon>
                        </div>
                        <div class="operate-right-item-text">
                            无业务
                        </div>
                    </div>
                </div>
            </div>
            <div class="home-table">
                <my-table :loading="loading" :columns="columns" :dataSource="mockData" :showIndex="true" :show-operation="true">
                    <template #filter-pl>
                        <div class="collect" style="width: 100px; display: flex; flex-direction: column; gap: 10px;">
                            <el-radio-group v-model="filterData.plf">
                                <el-radio :value="3">已完成</el-radio>
                                <el-radio :value="6">未完成</el-radio>
                                <el-radio :value="9">无业务</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="template-operate" style="width: 140px; display: flex; gap: 10px;">
                            <el-button type="primary">重置</el-button>
                            <el-button type="primary">确定</el-button>
                        </div>
                    </template>
                    <template #data-pl>
                        <el-icon :size="20" color="#ccc"><CircleCheckFilled /></el-icon>
                    </template>
                    <template #filter-jz>
                        <div class="collect" style="width: 100px; display: flex; flex-direction: column; gap: 10px;">
                            <el-radio-group v-model="filterData.plf">
                                <el-radio :value="3">已完成</el-radio>
                                <el-radio :value="6">未完成</el-radio>
                                <el-radio :value="9">无业务</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="template-operate" style="width: 140px; display: flex; gap: 10px;">
                            <el-button type="primary">重置</el-button>
                            <el-button type="primary">确定</el-button>
                        </div>
                    </template>
                    <template #data-jz>
                        <el-icon :size="20" color="#ccc"><CircleCheckFilled /></el-icon>
                    </template>
                    <template #filter-sb>
                        <div class="collect" style="width: 100px; display: flex; flex-direction: column; gap: 10px;">
                            <el-radio-group v-model="filterData.plf">
                                <el-radio :value="3">已完成</el-radio>
                                <el-radio :value="6">未完成</el-radio>
                                <el-radio :value="9">无业务</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="template-operate" style="width: 140px; display: flex; gap: 10px;">
                            <el-button type="primary">重置</el-button>
                            <el-button type="primary">确定</el-button>
                        </div>
                    </template>
                    <template #data-sb>
                        <el-icon :size="20" color="#ccc"><CircleCheckFilled /></el-icon>
                    </template>
                    <template #filter-jk>
                        <div class="collect" style="width: 100px; display: flex; flex-direction: column; gap: 10px;">
                            <el-radio-group v-model="filterData.plf">
                                <el-radio :value="3">已完成</el-radio>
                                <el-radio :value="6">未完成</el-radio>
                                <el-radio :value="9">无业务</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="template-operate" style="width: 140px; display: flex; gap: 10px;">
                            <el-button type="primary">重置</el-button>
                            <el-button type="primary">确定</el-button>
                        </div>
                    </template>
                    <template #data-jk>
                        <el-icon :size="20" color="#ccc"><CircleCheckFilled /></el-icon>
                    </template>
                    <template #filter-jsb>
                        <div class="collect" style="width: 100px; display: flex; flex-direction: column; gap: 10px;">
                            <el-radio-group v-model="filterData.plf">
                                <el-radio :value="3">已完成</el-radio>
                                <el-radio :value="6">未完成</el-radio>
                                <el-radio :value="9">无业务</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="template-operate" style="width: 140px; display: flex; gap: 10px;">
                            <el-button type="primary">重置</el-button>
                            <el-button type="primary">确定</el-button>
                        </div>
                    </template>
                    <template #data-jsb>
                        <el-icon :size="20" color="#ccc"><CircleCheckFilled /></el-icon>
                    </template>
                    <template #operation>
                        <el-button type="primary">建账</el-button>
                        <el-button type="primary">设置</el-button>
                    </template>
                </my-table>
            </div>
            <div class="table-pagination">
                <el-pagination
                    v-model:current-page="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[100, 200, 300, 400]"
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.home {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(239,239,239);
}
.home-top {
    width: 94%;
    margin: 20px auto;
    background-color: rgb(239,239,239);
    box-shadow: 0 0 10px 0 #eee;
    display: flex;
    gap: 10px;
    .home-top-left {
        flex: 1;
        background-color: #fff;
        .home-top-left-title{
            width: 94%;
            height: 50px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;

            box-sizing: border-box;
            .home-top-left-title-label {
                height: 50px;
                line-height: 50px;
                position: relative;
                padding-left: 10px;
                &::before {
                    content: '';
                    position: absolute;
                    width: 4px;
                    height: 20px;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    border-radius: 2px;
                    background-color: #f38d4e;
                }
            }
            .home-top-left-title-filter {
                height: 100%;
                display: flex;
                align-items: center;
                gap: 5px;
                .left-title-filter-date {
                    height: 100%;
                    display: flex;
                    align-items: center;
                    gap: 5px;
                }
            }
        }
        .home-top-left-chars {
            width: 94%;
            height: 220px;
            margin: 0 auto;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            gap: 10px;
            .home-top-left-chars-item {
                flex: 1;
                height: 200px;
                box-sizing: border-box;
                background-color: rgb(247,248,250);
                .chars-item-label {
                    width: 100%;
                    height: 40px;
                    line-height: 40px;
                    padding: 0 20px;
                    box-sizing: border-box;
                }
                .chars-content {
                    width: 100%;
                    height: 160px;
                    line-height: 40px;
                    padding: 0 20px;
                    box-sizing: border-box;
                }
            }
        }
    }
    .home-top-right {
        width: 340px;
        padding: 0 10px;
        .home-top-right-label {
            width: 100%;
            height: 70px;
            display: flex;
            align-items: center;
            margin: 0 auto;
            background-color: #fff;
            box-shadow: 0 0 10px 0 #ddd;
            .top-right-label-wait {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
                .label-icon {
                    width: 20px;
                    height: 20px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .home-top-right-wapper {
            --height: 210px;
            width: 100%;
            height: var(--height);
            margin-top: 10px;
            .home-top-right-wapper-carousel {
                width: 100%;
                height: var(--height);
                img {
                    width: 100%;
                    height: var(--height);
                    object-fit: cover;
                }
            }
        }
    }
}
.home-table-body {
    width: 94%;
    margin: 20px auto;
    background-color: #ffffff;
    box-shadow: 0 0 10px 0 #eee;
    .home-table-operate {
        width: 100%;
        height: 50px;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        .label {
            height: 40px;
            line-height: 40px;
            position: relative;
            padding-left: 10px;
            &::before {
                content: '';
                position: absolute;
                width: 4px;
                height: 20px;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                border-radius: 2px;
                background-color: #f38d4e;
                box-sizing: border-box;
            }
        }
        .home-table-operate-left {
            height: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            .top-filter-btn {
                width: 80px;
                height: 30px;
                border-radius: 5px;
                border: 1px solid #ccc;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
                user-select: none;
                .top-filter-btn-icon {
                    width: 20px;
                    height: 20px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .home-table-operate-right {
            height: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            .home-table-operate-right-item {
                height: 100%;
                display: flex;
                align-items: center;
                gap: 5px;
            }
        }
    }
    .home-table {
        width: 100%;
    }
    .table-pagination{
        width: 100%;
        margin: 20px 0;
        display: flex;
        justify-content: center;
        padding-bottom: 20px;
    }
    
}

.top-filter-form, .top-filter-operate {
    width: 400px;
    background-color: #fff;
}
.top-filter-operate {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>